<template>
  <div>
    <el-popconfirm
        confirm-button-text='确定'
        cancel-button-text='取消'
        icon="el-icon-info"
        icon-color="red"
        title="确定删除吗？"
        @confirm="DeleteALL"
        >
      <el-button  icon="el-icon-delete" slot="reference" size=mini style="margin-left:10px">一键清空</el-button>
    </el-popconfirm>

    <!--用户列表表格-->
    <el-table :data="tableData" :max-height="tableHeight">
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column prop="msg" label="信息" show-overflow-tooltip="true" align="center">
      </el-table-column>      <el-table-column label="操作" align="center">
      <div class="operation_show" slot-scope="scope">
        <el-button type="text" icon="el-icon-chat-line-square" @click="view(scope.row)">查看</el-button>
      </div>
    </el-table-column>
    </el-table>

    <!--分页块-->
    <div>
      <el-pagination
          style="margin-top: 10px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[10,20,30,40,50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--查看详细用户信息对话框-->
    <el-dialog title="" :visible.sync="editFormVisible" width="60%">
      <el-form label-width="100px" class="abow_dialog">
        <el-form-item label="详细信息：">
          <el-input v-model="editForm.msg"  type="textarea" :autosize="{ minRows: 5, maxRows: 10}" resize="none" readOnly  ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "tabRead",
  data() {
    return {
      currentPage: 1,
      tableData: [],
      total: 0,
      pagenum: 1,
      pagesize: 10,
      check:1,
      editFormVisible: false,
      editForm: {},
      tableHeight: "",
      multipleSelection:[]
    }
  },
  created() {
    this.load(); //网页创建时加载数据
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },

  methods: {
    // 搜索功能
    load() {
      this.request.get("/notification/findNotice/" + this.pagenum + "/" + this.pagesize + "/" + this.$store.state.id + "/" + this.check)
          .then(res => {
            console.log(res);
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },
    // 显示详细用户信息表单对话框
    view(row) {
      this.editForm = row
      this.editFormVisible = true
    },

//一键删除
      DeleteALL(){
        this.request.get("/notification/empty/"+ this.$store.state.id).then(res =>{
          if(res.data.code === '200'){
            this.$message.success("删除成功")
            this.load()
          }else{
            this.$message.error("删除失败")
          }
        })
      },




    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    }
  },
}


</script>

<style scoped>

</style>